<input type="hidden" id="change_photo_status" value="<?php echo $this->session->flashdata('change_photo_status'); ?>" />
<script type="text/javascript">
  $(document).ready(function() {
    var change_profile_status = $.trim($('#change_photo_status').val());
    if (change_profile_status == 1) {
      toastr.success('Successfully changed your photo !');
      return false;
    }
    if (change_profile_status == 2) {
      toastr.error('<?php echo $this->session->flashdata('change_photo_error'); ?>');
      return false;
    }
    if (change_profile_status == 3) {
      toastr.success('Successfully removed your photo !');
      return false;
    }
  });
</script>

<div class="page" style="min-height: 500px;">
  <div class="page-container">
    <div class="container">
      <div class="row">
        <div class="span3">
          <h4>Settings</h4>
          <div class="sidebar">
            <ul class="col-nav span3">
              <li><a href="<?php echo base_url('settings/profile'); ?>"><i class="pull-right"></i>Profile</a></li>
              <li style="background-color: #EEE; outline: solid #CCC 1px;"><a href="<?php echo base_url('settings/photo'); ?>"><i class="pull-right"></i>Photo</a></li>
              <li><a href="<?php echo base_url('settings/password'); ?>"><i class="pull-right"></i>Password</a></li>
              <li><a href="<?php echo base_url('settings/others'); ?>"><i class="pull-right"></i>Others</a></li>
            </ul>
          </div>
        </div>
        <div class="span9">
          <h4 class="header">Change photo</h4>
          <h6>* Current photo</h6>
          <div align="center" style="margin-left: 180px; height: 250px; max-height: 250px; max-width: 250px; overflow: hidden; text-align: center; width: 250px; border: solid #EEEEEE">
            <table cellspacing="0" cellpadding="0" style="border: medium none; height: 250px; width: 250px;">
              <tbody>
                <tr>
                  <td valign="middle" align="center">
                    <img style="height: 250px; width: 250px; max-height: 250px; max-width: 250px;" border="0" src="<?php echo base_url('assets/photos/' . $user_data['user_image']); ?>">
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="header"></div>
          <h6>* Upload photo</h6>
          <form class="form-horizontal" method="post" action="<?php echo base_url('settings/photo'); ?>" enctype="multipart/form-data">
            <input type="hidden" name="csrf_token" value="<?php echo set_csrf_token(); ?>"/>
            <p style="color: tomato;">
              # Please, Do not fake. Use your photo.<b> Be yourself !</b><br/>
            </p>
            <div class="control-group">
              <label class="control-label">Image file </label>
              <div class="controls">
                <input name="user_image_file" id="user_image_file" type="file"/>
              </div>
            </div>
            <div class="control-group"> 
              <div class="controls">
                <button type="submit" class="btn">Upload & Save</button>
              </div>
            </div>
          </form>
          <div class="header"></div>
          <h6>* Remove photo</h6>
          <div class="control-group">
            <div style="margin-left: 180px;" class="controls">
              <a onclick="return confirm_action('Are you sure to remove your photo ?');" href="<?php echo base_url('settings/photo/remove'); ?>">
                <button type="submit" class="btn">Remove photo</button>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>